<!-- 商品详情 -->
<template>
	<view class="box">
		<view class="detail_box ">
			<view class="detail-content">
				<view class="goodes_detail_swiper-box">
					<!-- 添加左上角图标 -->
					<view class="top-left-icon" v-if="goodsInfo.is_next_day_delivery == 1">
						<image :src="$IMG_URL + '/goods/day5.png'" class="icon-image" />
					</view>
					<!-- 详情轮播 -->
					<swiper class="carousel" circular @change="swiperChange" :autoplay="true">
						<swiper-item @tap="tools.previewImage(goodsInfo.images, swiperCurrent)"
							v-for="(img, index) in goodsInfo.images" :key="index" class="carousel-item">
							<image class="swiper-image " :src="img" mode="aspectFill" lazy-load></image>
						</swiper-item>
					</swiper>
					<view v-if="goodsInfo.images" class="swiper-dots">{{ swiperCurrent + 1 }} /
						{{ goodsInfo.images.length }}
					</view>
				</view>

				<!-- 价格卡片组 -->
				<sh-price v-if="goodsInfo.title" :detail="goodsInfo" :type="goodsInfo.activity_status"
					@change="getActivityRules"></sh-price>
				<!-- 标题 -->
				<view class="x-bc bg-white title-card">
					<view class="">
						<view class="goods-title more-t">
							<!-- <text v-if="goodsInfo.is_next_day_delivery == 1" style="color: #f5a623;">[次日达]</text> -->
							{{ goodsInfo.title }}
						</view>
						<view class="sub-title more-t">{{ goodsInfo.subtitle }}</view>
					</view>
					<view class="tools-item y-f" @tap="onFavorite(goodsInfo.id)">
						<image class="tool-img"
							:src="Boolean(goodsInfo.favorite) ? $IMG_URL + '/favorite_end.png' : $IMG_URL + '/favorite.png'"
							mode=""></image>
						<text class="tool-title">收藏</text>
					</view>
				</view>

				<!-- 参与的活动 -->
				<sh-activity v-if="goodsInfo.activity_discounts_tags && goodsInfo.activity_discounts_tags.length"
					:detail="goodsInfo.activity_discounts"></sh-activity>

				<!-- 规格选择 -->
				<view class="sku-box " v-if="goodsInfo.is_sku" @tap="showSku = true">
					<view class="x-bc">
						<view class="x-f">
							<text class="title">规格</text>
							<text class="tip">{{ currentSkuText || '请选择规格' }}</text>
						</view>
						<text class="cuIcon-right"></text>
					</view>
				</view>
				<t-sku v-if="showSku && goodsInfo.id" v-model="showSku" :goodsInfo="goodsInfo" :buyType="buyType"
					:goodsType="'goods'" @changeType="changeType" @getSkuText="getSkuText"></t-sku>
				<!-- 服务 -->
				<sh-serve v-if="goodsInfo.service.length" v-model="showServe" :serveList="goodsInfo.service"></sh-serve>
				<!-- 优惠券 -->
				<sh-coupon v-if="goodsInfo.coupons && goodsInfo.coupons.length"
					:couponList="goodsInfo.coupons"></sh-coupon>
				<!-- 选项卡 -->
				<view class="sticky-box">
					<view class="tab-box x-f">
						<view class="tab-item y-f x-c" @tap="onTab(tab.id)" v-for="tab in tabList" :key="tab.id">
							<view class="tab-title">
								{{ tab.title }}
								<text v-if="tab.id == 'tab2'" class="comment-num">({{ commentNum }})</text>
							</view>
							<text class="tab-line" :class="{ 'line-active': tabCurrent === tab.id }"></text>
						</view>
					</view>
					<view class="tab-detail pb20">
						<view class="rich-box" v-show="tabCurrent === 'tab0'"><u-parse
								:html="goodsInfo.content"></u-parse></view>
						<view class="goods-size" v-if="tabCurrent === 'tab1'">
							<view class="table-box" v-if="goodsInfo.params && goodsInfo.params.length">
								<view class="t-tr x-f" v-for="t in goodsInfo.params" :key="t.title">
									<view class="t-head x-f">{{ t.title }}</view>
									<view class="t-detail">{{ t.content }}</view>
								</view>
							</view>
						</view>
						<view class="goods-comment" v-if="tabCurrent === 'tab2'">
							<block v-for="comment in commentList" :key="comment.id"><sh-comment
									:comment="comment"></sh-comment></block>
							<view class="empty-box x-c" v-if="!commentList.length"><t-empty :isFixed="false"
									:emptyData="emptyData"></t-empty></view>
							<view class="more-box x-c" v-if="commentNum > 3">
								<button class="cu-btn more-btn x-f"
									@tap="jump('/pages/goods/comment-list', { goodsId: goodsInfo.id })">
									查看全部
									<text class="cuIcon-right"></text>
								</button>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 商品foot -->
			<view class="detail-foot_box safe-area-inset-bottom  x-f" v-if="!showSku && !showServe">
				<view class="left x-f">
					<view class="tools-item y-f" @tap="goHome">
						<image class="tool-img t-selector-circular" :src="$IMG_URL + '/tabbar/tab_home.png'" mode="">
						</image>
						<text class="tool-title t-selector-rect">首页</text>
					</view>
					<view class="tools-item y-f" @tap="goCart">
						<image class="tool-img" :src="$IMG_URL + '/tabbar/tab_cart.png'" mode=""></image>
						<text class="tool-title">购物车</text>
					</view>
					<view class="tools-item y-f" @tap="onShare">
						<image class="tool-img" :src="$IMG_URL + '/share.png'" mode=""></image>
						<text class="tool-title">分享</text>
					</view>
				</view>
				<view class="detail-right">
					<view class="detail-btn-box x-ac">
						<button class="cu-btn tool-btn add-btn" @tap="addCart">加入购物车</button>
						<button class="cu-btn tool-btn pay-btn" @tap="goPay">立即购买</button>
					</view>
				</view>
			</view>
			<!-- 分享组件 -->
			<t-share v-if="showShare" v-model="showShare" :shareData="goodsInfo" :posterType="'goods'"></t-share>
			<!-- 登录提示 -->
			<t-login-modal></t-login-modal>
		</view>
	</view>
</template>

<script>
	import shActivity from './children/sh-activity.vue';
	import shPrice from './children/sh-price.vue';
	import shServe from './children/sh-serve.vue';
	import shCoupon from './children/sh-coupon.vue';
	import shComment from '../children/sh-comment.vue';
	import {
		mapMutations,
		mapActions,
		mapState
	} from 'vuex';
	export default {
		components: {
			shServe,
			shPrice,
			shCoupon,
			shComment,
			shActivity
		},
		data() {
			return {
				currentSkuText: '', //选中规格
				showShare: false,
				buyType: 'sku',
				showSku: false,
				showServe: false,
				tools: this.$tools,
				goodsInfo: {},
				commentList: [], //商品评价列表
				commentNum: 0, //商品评价总数
				favorite: false,
				activityRules: {},
				currentSkuList: [],
				confirmGoodsInfo: {},
				swiperCurrent: 0, //轮播下标
				tabCurrent: 'tab0',
				emptyData: {
					img: this.$IMG_URL + '/empty/comment_empty.png',
					tip: '暂无评价~'
				},
				tabList: [{
						id: 'tab0',
						title: '商品详情'
					},
					{
						id: 'tab1',
						title: '规格参数'
					},
					{
						id: 'tab2',
						title: '用户评价'
					}
				]
			};
		},
		computed: {},
		onLoad() {
			
			this.getGoodsDetail();
		},
		onShow(){
			uni.setStorageSync('isLoaded',true);
		},
		onReady() {},
		methods: {
			getActivityRules(e) {
				if (e) {
					this.activityRules = JSON.parse(e);
				}
			},
			// 路由跳转
			jump(path, parmas) {
				this.showShare = false;
				this.$Router.push({
					path: path,
					query: parmas
				});
			},
			// 回到首页
			goHome() {
				this.$Router.pushTab({
					path: '/pages/index/index'
				});
			},
			goCart() {
				this.$Router.pushTab({
					path: '/pages/index/cart'
				});
			},
			// 轮播图切换
			swiperChange(e) {
				const index = e.detail.current;
				this.swiperCurrent = index;
			},
			// 选项卡
			onTab(id) {
				this.tabCurrent = id;
			},
			// 商品详情
			getGoodsDetail() {
				let that = this;
				that.$api('goods.detail', {
					id: that.$Route.query.id
				}).then(res => {
					if (res.code === 1) {
						that.goodsInfo = res.data;
						that.getCommentList();
						that.setShareInfo({
							query: {
								url: 'goods-' + that.$Route.query.id
							},
							title: that.goodsInfo.title,
							image: that.goodsInfo.image
						});
					}
					if (res.code == 0) {
						that.$tools.toast(res.msg);
					}
				});
			},
			// 商品评论
			getCommentList() {
				let that = this;
				that.$api('goods_comment.list', {
					goods_id: that.goodsInfo.id,
					per_page: 3,
					type: 'all'
				}).then(res => {
					if (res.code === 1) {
						that.commentList = res.data.data;
						that.commentNum = res.data.total;
					}
				});
			},
			// 组件返回的type;
			changeType(e) {
				this.buyType = e;
			},
			// 组件返回的规格;
			getSkuText(e) {
				this.currentSkuText = e;
			},
			// 分享
			onShare() {
				this.showShare = true;
			},
			// 加入购物车
			addCart() {
				if (Boolean(uni.getStorageSync('token'))) {
					this.buyType = 'cart';
					this.showSku = true;
				} else {
					this.$store.commit('LOGIN_TIP', true);
				}
			},
			// 立即购买
			goPay() {
				if (Boolean(uni.getStorageSync('token'))) {
					this.buyType = 'buy';
					this.showSku = true;
				} else {
					this.$store.commit('LOGIN_TIP', true);
				}
			},
			// 收藏
			onFavorite(goodsId) {
				let that = this;
				that.$api('goods.favorite', {
					goods_id: goodsId
				}).then(res => {
					if (res.code === 1) {
						that.goodsInfo.favorite = res.data;
						that.$tools.toast(res.msg);
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	.box {
		padding-bottom: 100rpx;
	}

	.detail-content {
		&::-webkit-scrollbar {
			width: 0;
			height: 0;
			color: transparent;
		}
	}

	.sticky-box {
		.tab-box {
			position: -webkit-sticky;
			position: sticky;
			top: 0;
			z-index: 99;
		}
	}

	// 商品图片轮播



	.goodes_detail_swiper-box {
		width: 750rpx;
		height: 750rpx;
		position: relative;

		.top-left-icon {
			position: absolute;
			top: 10px;
			/* 距离顶部的距离 */
			right: 10px;
			/* 距离左边的距离 */
			z-index: 10;
			/* 确保图标在最上层 */
		}

		.icon-image {
			width: 66px;
			/* 图标的宽度 */
			height: 34px;
			/* 图标的高度 */
		}

		.carousel {
			width: 750rpx;
			height: 100%;
		}

		.carousel-item {
			width: 750rpx;
			height: 100%;
		}

		.swiper-image {
			width: 750rpx;
			height: 100%;
			background: #ccc;
		}

		.swiper-dots {
			display: flex;
			position: absolute;
			right: 20rpx;
			bottom: 20rpx;
			line-height: 44rpx;
			border-radius: 22rpx;
			padding: 0 15rpx;
			background: rgba(#333, 0.3);
			font-size: 28rpx;
			color: rgba(#fff, 0.9);
		}
	}

	// 规格卡片
	.sku-box {
		line-height: 82rpx;
		background: #fff;
		padding: 0 20rpx;
		margin: 20rpx 0;
		font-size: 28rpx;

		.title {
			color: #999;
			margin-right: 20rpx;
		}

		.tip {
			color: #333;
		}

		.cuIcon-right {
			color: #bfbfbf;
			font-size: 36rpx;
		}
	}

	// 标题
	.title-card {
		.goods-title {
			font-size: 28rpx;
			font-weight: 500;
			width: 600rpx;
			line-height: 42rpx;
			background-color: #fff;
			margin: 10rpx 20rpx;
		}

		.sub-title {
			padding: 0 20rpx;
			color: #999999;
			font-size: 24rpx;
			font-weight: 500;
			line-height: 42rpx;
			background-color: #fff;
			padding-bottom: 10rpx;
		}

		.tools-item {
			width: 100rpx;
			background-color: #fff;
			margin: 10rpx 0;

			.tool-img {
				width: 46rpx;
				height: 46rpx;
			}

			.tool-title {
				font-size: 22rpx;
				line-height: 22rpx;
				padding-top: 8rpx;
				color: #666;
			}
		}
	}

	// 选项卡

	.tab-box {
		height: 102rpx;
		background: #fff;
		border-bottom: 1rpx solid rgba(#dfdfdf, 0.8);
		margin-top: 20rpx;

		.tab-item {
			flex: 1;
			height: 100%;
			position: relative;
			font-size: 30rpx;
			font-weight: bold;
			color: #333;

			.tab-line {
				width: 123rpx;
				height: 4rpx;
				left: 50%;
				bottom: 20rpx;
				transform: translateX(-50%);
				background: transparent;
				position: absolute;
				z-index: 2;
			}

			.line-active {
				background: $t-mainColor;
			}
		}
	}

	.tab-detail {
		min-height: 300rpx;
		background: #fff;
		background: #fff;

		.rich-box {
			/deep/ img {
				display: block;
			}
		}

		.goods-size {
			padding-top: 30rpx;

			.table-box {
				width: 710rpx;
				margin: auto;
				background: rgba(255, 255, 255, 1);
				border: 1rpx solid rgba(223, 223, 223, 1);

				.t-tr {
					border-bottom: 1rpx solid rgba(223, 223, 223, 1);

					&:last-child {
						border-bottom: none;
					}

					.t-head {
						font-size: 26rpx;
						color: #999;
						flex: 1;
						padding: 15rpx 20rpx;
						height: 100%;
						border-right: 1rpx solid rgba(223, 223, 223, 1);
					}

					.t-detail {
						font-size: 26rpx;
						flex: 4;
						padding: 15rpx 20rpx;
						height: 100%;
					}
				}
			}
		}

		.goods-comment {
			padding-top: 30rpx;
			min-height: 300rpx;

			.more-box {
				height: 100rpx;
				background: #fff;

				.more-btn {
					width: 200rpx;
					height: 60rpx;
					border: 1rpx solid $t-mainColor;
					border-radius: 30rpx;
					font-size: 26rpx;
					font-weight: 400;
					color: $t-mainColor;
					padding: 0;
					background: #fff;

					.cuIcon-right {
						font-size: 30rpx;
						margin-left: 10rpx;
					}
				}
			}
		}
	}

	// 底部工具栏
	.detail-foot_box {
		min-height: 100rpx;
		background: rgba(255, 255, 255, 1);
		border-top: 1rpx solid rgba(238, 238, 238, 1);
		width: 100%;
		position: fixed;
		bottom: 0;
		z-index: 999;

		.left,
		.detail-right {
			flex: 1;
		}

		.tools-item {
			flex: 1;
			height: 100%;

			.tool-img {
				width: 46rpx;
				height: 46rpx;
			}

			.tool-title {
				font-size: 22rpx;
				line-height: 22rpx;
				padding-top: 8rpx;
				color: #333;
			}
		}

		.detail-btn-box {
			flex: 1;

			.tool-btn {
				font-size: 28rpx;
				font-weight: 500;
				color: rgba(#fff, 0.9);
				width: 210rpx;
				height: 70rpx;
				border-radius: 35rpx;
				padding: 0;
				margin-right: 20rpx;

				.price {
					font-size: 24rpx;
					font-weight: bold;
					color: rgba(#fff, 0.9);
				}

				.price-title {
					font-size: 20rpx;
					font-weight: 500;
					color: rgba(#fff, 0.9);
					padding-top: 8rpx;
				}
			}

			.add-btn {
				box-shadow: 0px 2rpx 5rpx 0px rgba(102, 103, 104, 0.46);
				background: linear-gradient(90deg, rgba(103, 104, 105, 1), rgba(82, 82, 82, 1));
			}

			.pay-btn {
				background: linear-gradient(to right, $t-gradualColor, $t-mainColor);
			}

			.seckill-btn {
				width: 432rpx;
				height: 70rpx;
				background: linear-gradient(to right, $t-gradualColor, $t-mainColor);
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);
				border-radius: 35rpx;
				padding: 0;
				margin-right: 20rpx;
			}

			.seckilled-btn {
				width: 432rpx;
				height: 70rpx;
				background: rgba(221, 221, 221, 1);
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
				border-radius: 35rpx;
				padding: 0;
				margin-right: 20rpx;
			}
		}
	}
</style>